<!--
 * @Description: 回弹检验
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 14:55:29
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display:flex">
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px;">校验时间</span>
                  <el-date-picker v-model="value1" size="medium" type="datetimerange" unlink-panels start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">工程名称</span>
                  <el-input v-model="tableParam.engineeringName" size="medium" style="width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">状态</span>
                  <el-select v-model="tableParam.detectionStatus" size="medium" placeholder="请选择" style="width: 140px;">
                    <el-option label="已检测" :value='1'></el-option>
                    <el-option label="待取样" :value="0"></el-option>
                    <el-option label="待检测" :value="2"></el-option>
                  </el-select>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card">
            <div class="card_nav">
              <div>
                <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0;" @click="$router.push({ name:'smartsoiltesta_a'})">
                  <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
                  添加(跳页面)
                </el-button>
              </div>
              <div>
                <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px;">
                  <el-link :underline="false">
                    <span class="el-icon--left">
                      <i class="iconfont iconicon_button_filtrate"></i>
                    </span>
                    筛选
                  </el-link>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in table" :key="index">
                      <el-checkbox v-model="item.status">{{ item.label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCHU'))!==-1" :underline="false" @click="handleExport">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_export1"></i>
                  </span>
                  导出
                </el-link>
              </div>
            </div>
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                    <template slot-scope="scope">
                      <span v-if=" item.label == '状态'">
                        <span v-if=" scope.row.detectionStatus==1">已检测</span>
                        <span v-if=" scope.row.detectionStatus==0">待取样</span>
                        <span v-if=" scope.row.detectionStatus==2">未检测</span>
                      </span>
                      <span v-if=" item.label == '自动检验结果'">
                        <span style="color:#969799;">{{scope.row.detectionResult?scope.row.detectionResult.toUpperCase():''}}</span>
                      </span>
                      <span v-else-if=" item.label == '构件详情'">
                        <span v-if="ButtonList.findIndex(res=>(res.buttonValue=='GOUJIANXQ'))!==-1" class="table_link" style="cursor: pointer;" @click="open1('Dialog3',scope.row)">构件详情</span>
                      </span>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 图片查看 -->
    <el-dialog v-dialogDrag :visible.sync="Dialog1" width="980px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">图片信息</span>
      <div class="dialoginfo">
        <div>
          <el-image v-for="(item, index) in arr1" :key="index" style="width: 200px; height:200px;margin:0 10px 10px 10px;border-radius: 4px;" :src="item" :preview-src-list="arr1" :z-index="10000"></el-image>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog1 = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="areaVisible" width="880px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">查看</span>
      <div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="areaList" tooltip-effect="dark">
          <el-table-column label="构件" align="center">
            <template>
              {{componentName}}
            </template>
          </el-table-column>
          <el-table-column label="测区" align="center" prop="testingZoneName">
          </el-table-column>
          <el-table-column label="检验数据" align="center" prop="datas">
          </el-table-column>
          <el-table-column label="数据来源" align="center" prop="dataSource">
            <template slot-scope="scope">
              {{['','自动', '手动'][scope.row.dataSource]}}
            </template>
          </el-table-column>
          <el-table-column label="回弹平均值" align="center" prop="springbackValue">
          </el-table-column>
          <el-table-column label="强度换算值" align="center" prop="intensionValue">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="areaVisible=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 构件详情 -->
    <el-dialog v-dialogDrag :visible.sync="Dialog3" width="880px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">构件详情</span>
      <div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="arr3" tooltip-effect="dark">
          <el-table-column align="center" label="构件" prop="name"></el-table-column>
          <el-table-column align="center" label="测区个数" prop="testingZoneNum">
            <template slot-scope="scope">
              <el-button size="small" class="bottom_text" type="text" @click="showArea(scope.row)">{{scope.row.testingZoneNum}}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="碳化深度" prop="degreeOfCarbide"></el-table-column>
          <el-table-column align="center" label="检测面" prop="detectionOfSurface"></el-table-column>
          <el-table-column align="center" label="检测角度" prop="detectionAngle"></el-table-column>
          <el-table-column align="center" label="检测环境" prop="environment"></el-table-column>
          <el-table-column align="center" label="回弹仪号" prop="schmidtHammerNo"></el-table-column>
          <el-table-column align="center" label="输送方式" prop="conveyWay"></el-table-column>
          <el-table-column align="center" label="率定值" prop="calibration"></el-table-column>
          <el-table-column align="center" label="浇筑日期" prop="pouringTime"></el-table-column>
          <el-table-column align="center" label="强度等级" prop="intension"></el-table-column>
          <el-table-column align="center" label="检测依据" prop="detectionGist"></el-table-column>
          <el-table-column align="center" label="表现质量" prop="manifestationMass" min-width="130">
            <template slot-scope="scope">
              {{manifestationMassFun(scope.row.manifestationMass )}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="强度换算值" prop="intensionValue"></el-table-column>
          <el-table-column align="center" label="回弹推定值" prop="springbackValue"></el-table-column>
          <el-table-column align="center" label="照片/视频" prop="">
            <template slot-scope="scope">
              <span class="table_link" style="cursor: pointer;" @click="open('Dialog1',scope.row)">查看</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注" prop=""></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog3=false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { queryPage, getListByPid, getTestIngZones } from "@/api/smart/soiltest/a.js";
//import { getDetail } from "@/api/GHnumber/goods.js";
export default {
  mixins: [mixin],
  data() {
    return {
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      /*表格数据*/
      table: [
        {
          label: "工程名称",
          width: "120",
          prop: "engineeringName",
          status: true,
        },
        { label: "工程位置", width: "auto", prop: "", status: true },
        { label: "浇筑部位", width: "120", prop: "pouringPart", status: true },
        { label: "浇筑时间", width: "120", prop: "pouringTime", status: true },
        { label: "产品名", width: "auto", prop: "product", status: true },
        { label: "状态", width: "120", prop: "", status: true },
        {
          label: "自动检验结果",
          width: "auto",
          prop: "detectionResult",
          status: true,
        },
        { label: "构件详情", width: "185", prop: "", status: true },
        { label: "站点", prop: "station", status: true },
        { label: "龄期", prop: "timeDifference", status: true },
        // { label: "图片/视频", width: "120", prop: "", status: true },
        { label: "回弹时间", width: "185", prop: "recoilTime", status: true },
        { label: "检验人", width: "120", prop: "inspector", status: true },
        {
          label: "检验时间",
          width: "auto",
          prop: "detectionTime",
          status: true,
        },
        // { label: "操作", width: "120", prop: "", status: true },
      ],
      pagesType: 0,
      /*添加表单数据*/
      low: {},
      Dialog1: false,
      //Dialog2: false,
      Dialog3: false,
      arr1: [],
      arr3: [],
      // arr2: [],
      value1: [],
      areaList: [],
      areaVisible: false,
      componentName: '',
      selectRows: [],
    };
  },
  created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = { ...this.tableParam, detectionTypeId: 6 };
    this.gettableData();
  },
  watch: {
    value1() {
      if (this.value1) {
        this.tableParam.createTime = this.value1[0];
        this.tableParam.updateTime = this.value1[1];
      } else {
        this.tableParam.createTime = ''
        this.tableParam.updateTime = ''
      }
    },
  },
  methods: {
    handleSelectionChange (value) {
      this.selectRows = value;
    },
    handleExport () {
      if (!this.selectRows.length) {
        this.$message.warning('请选择要导出的数据');
        return
      }
      const params = this.selectRows.map(item => item.id);
      this.$Download2('/icps/system/sign/intelligent/component/exportList', params);
    },
    showArea (data) {
      this.componentName = data.name;
      getTestIngZones({id: data.id}).then(res => {
        if (res.code === 1001) {
          this.areaList = res.data;
          this.areaVisible = true;
        }
      })
    },
    init() {
      /*重置数据*/
      this.value1 = [];
      this.tableParam.engineeringName = "";
      this.tableParam.detectionStatus = "";
      this.gettableData();
    },
    open(key, low) {
      this.low = low;
      // if (key == "Dialog2") {
      //   getDetail({ pid: low.id }).then((res) => {
      //     console.log(res.data);
      //     this.arr2 = res.data;
      //     this.arr2.title.unshift({ name: "检验项目", sortNum: 0 });
      //     this[key] = true;
      //   });
      //   return;
      // }
      this[key] = true;
    },
    open1(key, low) {
      this.low = low;
      getListByPid({ id: low.id }).then((res) => {
        this.arr3 = res.data;
        this[key] = true;
      });
    },
    show(text) {
      this.$alert(text, {
        confirmButtonText: "确定",
        confirmButtonClass: "bottom_all",
        callback: () => { },
      });
    },
    manifestationMassFun(obj) {
      let text = []
      if (obj) {
        obj = JSON.parse(obj)
        obj.forEach((v) => {
          text.push(v.name)
        })
      }
      text = text.join('、')
      return text
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.dialoginfo-title {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 20px 0;
  font-weight: bold;
}
.el-input,
.el-select {
  width: 240px;
}
/*
 <el-link class="table_link" :underline="false">查看配合比</el-link>*/
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
